<template>
	<div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-select v-model="labelList" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择标签">
				<el-option v-for="item in options" :key="item.id" :label="item.labelName" :value="item.id">
				</el-option>
			</el-select>
			<el-select v-model="enterpriseList" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择企业">
				<el-option v-for="item in optionss" :key="item.id" :label="item.enterpriseName" :value="item.id">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="Label()">确 定</el-button>
			</span>
		</el-dialog>

		<div style="margin-left: 20px;margin-right: 1.25rem;overflow: hidden;">
			<input style="height: 3.25rem;width: 100%;margin-top: 0.625rem;border: none;outline: none;padding: 0.625rem;background-color:#03d3bd ;color: white;font-size: 1.25rem;font-weight: 300;"
			 placeholder="请输入文章名称" v-model="title" />
		</div>
		<div style="height: 100vh;margin-left: 20px;margin-right: 1.25rem;overflow: hidden;">
			<quill-editor v-model="content" style="height:100%;background-color: white;"></quill-editor>

		</div>
		<div style="display: flex;justify-content: flex-end;margin-bottom: 1.25rem;margin-top: 1.25rem;margin-right: 1.875rem;">
			<el-button type="primary" @click="dialogVisible = true" style="background-color: #03d3bd;border: none;">发布</el-button>
		</div>

	</div>
</template>

<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		quillEditor
	} from "vue-quill-editor"
	import {
		HttpManager
	} from '../../request/Facial.js'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				textarea2: '',
				hh: 'sdvfdwfwefewvferverv',
				content: '',
				title: '',
				dialogVisible: false,
				options: [],
				optionss: [],
				value: [],
				enterpriseList: [],
				labelList: []
			}
		},

		methods: {
			Label() {
				HttpManager.Myposts({
					"content": this.content,
					"title": this.title,
					"enterpriseList": this.enterpriseList,
					"labelList": this.labelList
				}).then(e => {
					console.log(e.data.data);
					this.dialogVisible = false;
					this.$message({
						message: '发布成功',
						type: 'success'
					});
					this.$router.push({
					  path: `/SurfaceDetails`,
					  query: {
					    id: e.data.data,
					  },
					});
				})
			},
			Init() {
				HttpManager.GetLabels(1, 100).then((e) => {
					console.log(e.data.data);
					this.options = e.data.data;
				});
			},
			InitEnterprises() {
				HttpManager.GetEnterprises(1, 1000).then((e) => {
					console.log(e.data.data);
					this.optionss = e.data.data;
				})
			},
			handleClose() {
				this.dialogVisible = false;
			}
		},
		created() {
			this.Init();
			this.InitEnterprises();
		}
	}
</script>

<style scoped="scoped">
	::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #ffffff;
		font-size: 20px;
	}

	::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #ffffff;
		font-size: 20px;
	}

	:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #ffffff;
		font-size: 20px;
	}

	.el-select {
		width: 90%;
		margin-top: 1.25rem;
	}
</style>
